<template>
	<view class="container">
		<!-- #ifdef APP-PLUS -->
		<view class="status-bar"></view>
		<!-- #endif -->

		<my-scroll-tab :list="cate_list" bgColor="#fff" :current="currentIndex" @itemClick='itemClick'></my-scroll-tab>
		<scroll-view scroll-y="true" class="items" v-if="ry_list.length>0" @scrolltolower="loadMore">
			<view style="height: 20rpx;"></view>
			<my-ry-items bgColor="#fff" :list='ry_list' @itemClick="ryItemClick" @btnClick="ryItemClick"></my-ry-items>
			<u-loadmore :status="hasMore?'loading':'nomore'" />
		</scroll-view>
		<view class="empty-container" v-else>
			<u-empty text="暂无相关内容" :icon="emptyIcon" />
		</view>
		<my-tabbar></my-tabbar>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				currentIndex: 0,
				emptyIcon: 'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/empty.png',
				hasMore: true,
				cate_id: 0,
				//页数
				pageIndex: 1,
				ry_list: [],
				cate_list: [],
			};
		},
		methods: {
			loadMore() {
				if (_this.hasMore) {
					_this.pageIndex++
					_this.get_list()
				}
			},
			itemClick(index) {
				_this.cate_id = _this.cate_list[index]['id']
				_this.pageIndex = 1
				_this.ry_list = []
				_this.get_list()
			},
			ryItemClick(item) {
				uni.navigateTo({
					url: `/pages/foster/foster-detail?id=${item.goods_id}`
				})
			},
			async get_cates() {
				const params = {}
				const data = await _this.$post('api/get_ry_cates', params)
				if (data.code == 200) {
					this.cate_list = data.data.list
					if (_this.cate_list.length > 0) {
						if (_this.cate_id == 0) {
							_this.cate_id = _this.cate_list[0]['id']
						}
						_this.get_list()
					} else {
						_this.get_list()
					}
				}
			},
			async get_list() {
				const params = {
					pageIndex: this.pageIndex,
					pageSize: 20,
					cate_id: _this.cate_id,
				}
				const data = await _this.$post('api/get_ry_goods', params)
				if (data.code == 200) {
					this.ry_list.push(...data.data.list)
					this.hasMore = data.data.list.length >= 20
				} else {
					this.hasMore = false
				}
			},
		},
		onLoad(e) {
			_this = this;
			_this.get_cates()
		},
		onPullDownRefresh() {
			_this.pageIndex = 1
			_this.ry_list = []
			this.get_cates()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onShow() {

		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		padding: 0;

		.status-bar {
			background: #fff;
		}

		.items {
			height: calc(100% - 80rpx - var(--status-bar-height));
			box-sizing: border-box;
		}
	}
</style>